<!-- src/components/TopNavbar.vue -->
<template>
  <el-header style="background-color: white; color: white; padding: 0 20px;">
    <div style="display: flex; justify-content: space-between; align-items: center; height: 60px;">
      <div>
        <el-button type="text" @click="goHome">首页</el-button>
        <el-button type="text" @click="goBot">BOT</el-button>
        <el-button type="text" @click="goTrend">沸点</el-button>
        <el-button type="text" @click="goCourses">课程</el-button>
        <el-button type="text" @click="goLive">直播</el-button>
        <el-button type="text" @click="goActivities">活动</el-button>
        <el-button type="text" @click="goAI">AI刷题</el-button>
        <el-button type="text" @click="goMall">商城</el-button>
        <el-button type="text" @click="goApp">APP</el-button>
        <el-button type="text" @click="goPlugins">插件</el-button>
      </div>
      <div>
        <template v-if="!user">
          <el-button type="text" @click="goLogin">登录</el-button>
          <el-button type="text" @click="goRegister">注册</el-button>
        </template>
        <template v-else>
          <el-button type="text" @click="goProfile">{{ user.name }}</el-button>
          <el-button type="text" @click="logout">退出</el-button>
        </template>
      </div>
    </div>
  </el-header>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const user = { name: '张三' }; // 假设用户已登录

    const goHome = () => router.push('/');
    const goBot = () => router.push('/bot');
    const goTrend = () => router.push('/trend');
    const goCourses = () => router.push('/courses');
    const goLive = () => router.push('/live');
    const goActivities = () => router.push('/activities');
    const goAI = () => router.push('/ai');
    const goMall = () => router.push('/mall');
    const goApp = () => router.push('/app');
    const goPlugins = () => router.push('/plugins');
    const goLogin = () => router.push('/login');
    const goRegister = () => router.push('/register');
    const goProfile = () => router.push('/profile');
    const logout = () => {
      // 退出登录逻辑
      alert('退出成功');
      router.push('/');
    };

    return {
      user,
      goHome,
      goBot,
      goTrend,
      goCourses,
      goLive,
      goActivities,
      goAI,
      goMall,
      goApp,
      goPlugins,
      goLogin,
      goRegister,
      goProfile,
      logout,
    };
  },
};
</script>